<template>
  <div class="userinfo">
    <!-- 底部导航 -->
    <bottom-nav></bottom-nav>
    <!-- 未登录 -->
    <div class="notLogin" v-if="isLogin == false">
      <div class="notLogin-header">
        <div class="icon">
          <i class="iconfont icon-shezhi-copy" @click="$router.push('/setup')"></i>
          <i class="iconfont icon-lingdang" @click="$router.push('/news')"></i>
        </div>
      </div>
      <div class="notLogin-titke">
        <h1>新东方美食</h1>
        <h1>会做饭很酷哦~</h1>
      </div>
      <div class="notLogin-form">
        <button class="phone" @click="login()">账号密码登录</button>
        <button class="honor">华为登录</button>
      </div>
      <div class="notLogin-other">
        <div class="other-top">
          <span>其他方式登录</span>
        </div>
        <div class="other-content">
          <svg>
            <use xlink:href="#icon-weixin1"></use>
          </svg>
          <svg>
            <use xlink:href="#icon-QQ"></use>
          </svg>
          <svg>
            <use xlink:href="#icon-weibo"></use>
          </svg>
          <svg>
            <use xlink:href="#icon-shouji1"></use>
          </svg>
        </div>
      </div>
      <div class="notLogin-bottom">
        <div class="agreement">
          <input type="checkbox" :checked="checked" @click="check" />
          <span
            >登录注册即表示同意<a>《用户协议》</a>和<a>《隐私政策》</a></span
          >
        </div>
      </div>
    </div>

    <!-- 已登录 -->
    <div class="login-userinfo" v-if="isLogin == true">
      <div class="userinfo-header">
        <div class="header-left">
          <i class="iconfont icon-shezhi-copy" @click="$router.push('/setup')"></i>
        </div>
        <div class="header-right">
          <i class="iconfont icon-lingdang" @click="$router.push('/news')"></i>
          <i class="iconfont icon-fenxiang" @click="showShare = true"></i>
          <van-share-sheet v-model="showShare" :options="options" />
        </div>
      </div>
      <div class="userinfo-my">
        <div class="my-img">
          <img
            src="http://p1.music.126.net/KuCKatwM2ApNNXHLHX2g2w==/109951166688773276.jpg"
            alt=""
          />
        </div>
        <div class="my-right">
          <div class="right-top">
            <span>孤城·影</span>
            <div class="achievement">
              <!-- <i class="iconfont icon-jiangbei"></i> -->
              <svg>
                <use xlink:href="#icon-jiangbei"></use>
              </svg>
              <span>0枚</span>
            </div>
          </div>
          <div class="right-grade">
            <span>LV.8</span>
          </div>
          <div class="right-bottom">
            <div class="complete-data">
              <svg>
                <use xlink:href="#icon-a-qianbiwenjuyongpin"></use>
              </svg>
              <span>补全资料 +500经验值</span>
            </div>
          </div>
        </div>
      </div>
      <div class="userinfo-content">
        <div class="content-top">
          <div class="top-header">
            <span>厨男</span>
            <span>厨龄 0.2岁</span>
          </div>
          <span>吃货不是在吃就是在去吃的路上,没时间写签名</span>
        </div>
        <div class="content-center">
          <ul>
            <li>
              <span>0</span>
              <span>关注</span>
            </li>
            <li>
              <span>0</span>
              <span>粉丝</span>
            </li>
            <li>
              <span>0</span>
              <span>被收藏</span>
            </li>
            <li>
              <span>0</span>
              <span>被学做</span>
            </li>
            <li>
              <span>88</span>
              <span>经验值</span>
            </li>
          </ul>
        </div>
        <div class="content-bottom">
          <div class="bottom-left">
            <svg>
              <use xlink:href="#icon-huangguan1"></use>
            </svg>
            <div class="item">
              <span>尊享VIP卡</span>
              <span>
                400节好课免费学 <i class="iconfont icon-xiangyoujiantou"></i>
              </span>
            </div>
          </div>
          <div class="bottom-center">|</div>
          <div class="bottom-right">
            <svg>
              <use xlink:href="#icon-qianbi"></use>
            </svg>
            <div class="item">
              <span>签到领钱</span>
              <span>
                做任务赢现金 <i class="iconfont icon-xiangyoujiantou"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="userinfo-footer">
        <ul>
          <li>
            <i class="iconfont icon-chuangzuozhezhongxin"></i>
            <span>创作者中心</span>
          </li>
          <li>
            <i class="iconfont icon-caogaoxiang1"></i>
            <span>草稿箱</span>
          </li>
          <li>
            <i class="iconfont icon-shanshiguanli"></i>
            <span>膳食管理</span>
          </li>
          <li>
            <i class="iconfont icon-banshichugui"></i>
            <span>厨具管理</span>
          </li>
          <li>
            <i class="iconfont icon-zuijinliulan1"></i>
            <span>最近浏览</span>
          </li>
          <li>
            <i class="iconfont icon-caigouqingdan"></i>
            <span>采购清单(1)</span>
          </li>
          <li>
            <i class="iconfont icon-zhiboketang"></i>
            <span>课堂</span>
          </li>
          <li>
            <i class="iconfont icon-qianbao"></i>
            <span>钱包</span>
          </li>
          <li>
            <i class="iconfont icon-wodeyouhuiquan"></i>
            <span>优惠券</span>
          </li>
          <li>
            <i class="iconfont icon-dingdan-"></i>
            <span>订单</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import bottomNav from "../components/Nav/bottomNav.vue";
import { Toast } from "vant";
export default {
  components: {
    bottomNav,
  },
  data() {
    return {
      isLogin: false,
      token: "",
      checked: false,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
      ],
    };
  },
  methods: {
    login() {
      if (this.checked == true) {
        this.$router.push("/login");
      } else {
        Toast("勾选确认用户协议和隐私政策");
      }
    },
    check() {
      this.checked = true;
    },
  },
  created() {
    this.token = JSON.parse(localStorage.getItem("token") || "[]");
    // console.log(this.token);
    //判断没有值
    if (this.token != "") {
      this.isLogin = true;
    }
  },
};
</script>

<style lang="less">
.userinfo {
  .notLogin {
    width: 100%;
    height: 612px;
    // background-image: url("https://img1.baidu.com/it/u=3635277030,1190318822&fm=26&fmt=auto");
    .notLogin-header {
      .icon {
        display: flex;
        justify-content: space-between;
        i {
          margin: 15px 15px 15px 25px;
          font-size: 24px;
          font-weight: bold;
        }
      }
    }
    .notLogin-titke {
      margin: 0px 15px 0px 25px;
      h1 {
        margin: 10px 5px;
      }
    }
    .notLogin-form {
      margin: 100px 0px 70px;
      .phone {
        width: 310px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        border-radius: 25px;
        border: 1px solid #ffc535;
        background-color: #ffc535;
        margin: 10px 30px;
      }
      .honor {
        width: 310px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        border-radius: 25px;
        border: 1px solid #f7f5f8;
        background-color: #f7f5f8;
        margin: 10px 30px;
      }
    }
    .notLogin-other {
      .other-top {
        margin: 0px 15px 0px 25px;
        span {
          font-size: 13px;
          font-weight: bold;
          color: #333;
          // color: #909090;
        }
      }
      .other-content {
        margin: 20px 15px 15px 25px;
        svg {
          width: 30px;
          height: 30px;
          margin: 0px 15px 0px 10px;
        }
      }
    }
    .notLogin-bottom {
      .agreement {
        margin: 30px 15px 0px 25px;
        display: flex;
        align-items: center;
        input {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin: 0 5px;
        }
        span {
          font-size: 12px;
          color: #333;
          // color: #8e8e8e;
          a {
            font-weight: bold;
            // border-bottom: 1px solid #8e8e8e;
            border-bottom: 1px solid #333;
          }
        }
      }
    }
  }
  .login-userinfo {
    .userinfo-header {
      display: flex;
      justify-content: space-between;
      margin: 0px 25px 15px;
      padding-top: 15px;
      .header-left {
        i {
          font-size: 24px;
          font-weight: bold;
        }
      }
      .header-right {
        i {
          font-size: 24px;
          font-weight: bold;
        }
        i:first-child {
          margin-right: 10px;
        }
      }
    }
    .userinfo-my {
      display: flex;
      .my-img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #ccc;
        margin: 20px 30px 30px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .my-right {
        margin: 10px 0;
        .right-top {
          display: flex;
          align-items: center;
          margin-right: 25px;
          margin-bottom: 10px;
          .achievement {
            width: 50px;
            height: 15px;
            border-radius: 10px;
            background-color: #fce69e;
            margin-left: 10px;
            display: flex;
            align-items: center;
            svg {
              width: 16px;
              height: 16px;
            }
            span {
              margin-left: 8px;
              font-size: 10px;
            }
          }
        }
        .right-grade {
          span {
            font-size: 14px;
            color: #ecc145;
          }
        }
        .right-bottom {
          width: 235px;
          height: 32px;
          line-height: 32px;
          .complete-data {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fec435;
            border-radius: 20px;
            svg {
              width: 18px;
              height: 18px;
            }
            span {
              font-size: 16px;
              font-weight: bold;
              color: #333;
            }
          }
        }
      }
    }
    .userinfo-content {
      margin: 0px 15px 20px;
      .content-top {
        margin-bottom: 10px;
        .top-header {
          margin-bottom: 10px;
          span {
            font-size: 14px;
            font-weight: bold;
            margin-right: 15px;
          }
        }
        span {
          font-size: 14px;
          color: #000;
        }
      }
      .content-center {
        ul {
          height: 70px;
          display: flex;
          align-items: center;
          li {
            flex: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            span {
              font-size: 14px;
              color: #000;
            }
            span:first-child {
              font-weight: bold;
            }
            span:last-child {
              margin-top: 10px;
              color: #4a4a4a;
            }
          }
        }
      }
      .content-bottom {
        margin: 20px 0;
        height: 46px;
        border: 1px solid #f3f3f3;
        border-radius: 10px;
        background: -webkit-linear-gradient(left, #505050, #444, #373737);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .bottom-left {
          display: flex;
          svg {
            width: 32px;
            height: 24px;
            margin-top: 4px;
          }
          .item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 10px;
            span:first-child {
              font-size: 16px;
              font-weight: bold;
              color: #edd88f;
            }
            span:last-child {
              font-size: 12px;
              color: #fff;
            }
            i {
              font-size: 10px;
            }
          }
        }
        .bottom-center {
          color: #e4d48f;
        }
        .bottom-right {
          display: flex;
          align-items: center;
          svg {
            width: 32px;
            height: 24px;
          }
          .item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 10px;
            span:first-child {
              font-size: 16px;
              font-weight: bold;
              color: #edd88f;
            }
            span:last-child {
              font-size: 12px;
              color: #fff;
            }
            i {
              font-size: 10px;
            }
          }
        }
      }
    }
    .userinfo-footer {
      margin: 20px 15px;
      ul {
        height: 180px;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        li {
          flex: 20%;
          display: flex;
          flex-direction: column;
          align-items: center;
          i {
            font-size: 22px;
            font-weight: bold;
          }
          span {
            margin-top: 15px;
            font-size: 12px;
            color: #7a7a7a;
          }
        }
      }
    }
  }
}
</style>
